<template>
  <ph-view>
    <ph-tab>
      <ph-tab-panel title="基本demo">
        <ph-color-button :value="color" @pick="onPick" />
        <ph-pretty>{{ demo1 }}</ph-pretty>
        <ph-color-button :value="color" :preshow="false" @pick="onPick" />
        <ph-pretty>{{ demo2 }}</ph-pretty>
        <ph-color-button
          :value="color"
          :precolors="['#f0f', '#0f0', '#00f']"
          @pick="onPick"
        />
        <ph-pretty>{{ demo3 }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="基本介绍">
        <ph-pretty>{{ baseUsage }}</ph-pretty>
        <ph-blockquote type="warning">
          note 使用须知，该按钮需要依赖PhColorPicker 取色控件，
          所以需要PhColorPicker放在全局，具体参考
          <router-link to="/global">全局配置</router-link>
        </ph-blockquote>
        <ph-pretty>{{ dep }}</ph-pretty>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import { PhColorButton, PhTab, PhTabPanel, PhBlockquote, PhView } from "@/index";
import * as Data from "../data/color";
export default defineComponent({
  components: { PhColorButton, PhTab, PhTabPanel, PhBlockquote, PhView },
  setup() {
    const color = ref("#d86161");
    const onPick = (b: string) => {
      color.value = b;
    };
    return { onPick, color, ...Data };
  },
});
</script>
